<template>
	<view class="page my-edit">
		<view class="item">
			<view class="label">姓名：</view>
			<input v-model="form.name" type="text" placeholder="请输入姓名" placeholder-class="placeholderClass" @input="Onname" />
		</view>
		<view class="item">
			<view class="label">手机：</view>
			<input v-model="form.mobile" type="number" placeholder="请输入手机号码" placeholder-class="placeholderClass" @input="Onmobile" />
		</view>
		<view class="item">
			<view class="label">性别：</view>
			<uni-data-checkbox class="flex-1"
				v-model="form.gender"
				:localdata="gender.range"
				:selectedColor="themeColor"
				selectedTextColor="#1e1e1e"
				@change="Onsex">
			</uni-data-checkbox>
		</view>
		<view class="item">
			<view class="label">生日：</view>
			<view class="flex-1 date">
				<biaofun-datetime-picker
					placeholder="请选择生日"
					:defaultValue="form.birthday"
					:start="calendar.start"
					:end="calendar.end"
					fields="day"
					@change="Onbirthday"
				></biaofun-datetime-picker>
			</view>
			<uni-icons type="arrowright" size="12" :color="themeColor"></uni-icons>
		</view>
		<view class="btn font15 font-ffffff flex-row-center" @click="submit">提&nbsp;&nbsp;&nbsp;交</view>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/index.vue';
	export default {
		components: { biaofunDatetimePicker },
		data() {
			return {
				themeColor: '#03004c',
				calendar: {
					defaultValue: this.$base.formatTime(new Date(), "yyyy-MM-dd"),
					start: '1940-01-01',
					end: this.$base.formatTime(new Date(), "yyyy-MM-dd")
				},
				// 性别
				gender: {
					value: 1,
					range: [
						{ value: 1, text: "男" },
						{ value: 2, text: "女" }
					]
				},
				form: {
					name: '',
					mobile: '',
					gender: 1,
					birthday: this.$base.formatTime(new Date(), "yyyy-MM-dd")
				},
			}
		},
		onLoad: function(){
			// 获取信息
			this.$Http({
				url: 'set',
				token: true
			}).then(res => {
				if (res.code == 1) {
					this.form = res.data
				} else {
					uni.showToast({  title: res.msg, icon: 'none' });
				}
			});
		},
		methods: {
			Onname(e) {
				this.form.name = e.detail.value
			},
			Onmobile(e) {
				this.form.mobile = e.detail.value
			},
			Onsex(e){
				this.form.gender = e.detail.value
			},
			Onbirthday (date) {
				this.form.birthday = date.f1
			},
			// 提交表单
			submit () {
				if (this.form.name == '') {
					uni.showToast({  title: '请输入您的姓名', icon: 'none' });
					return false;
				}
				if (!this.$base.checkMobile(this.form.mobile)) {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
					return
				}
				this.$Http({
					url: 'set',
					data: this.form,
					token: true,
					type: 'POST'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({  title: '修改成功' });
						setTimeout(()=>{
							uni.switchTab({ url: '/pages/my/index' });
						}, 2000)
					} else {
						uni.showToast({  title: res.msg, icon: 'none' });
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
